<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="main-container color">
    <a-tabs default-active-key="2" @change="tabClick">
      <a-tab-pane key="2" title="套餐充值">
        <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
          <a-col :span="8" :offset="6">
            <a-form class="huakaClass" ref="mealRef" :model="mealForm" :auto-label-width="true">
              <a-form-item label="充值方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked2" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked2 == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="mealForm.addCard"
                        @blur="cardMealFn"
                        :disabled="checked2 == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked2 == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="mealForm.endCard"
                        :disabled="checked2 == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  { required: checked2 == 'disOrders' ? true : false, message: '卡号不能为空' },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked2" value="disOrders" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      @blur="cardMealFns"
                      v-model="mealForm.cardMultiline"
                      :disabled="checked2 == 'disOrders' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="setMealId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请选择充值套餐',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        v-model="mealForm.setMealId"
                        placeholder="请选择充值套餐"
                        allow-clear
                        @change="changeMeal"
                        :trigger-props="{ autoFitPopupMinWidth: true }"
                      >
                        <a-option v-for="item in mealList" :key="item.id" :value="item.id">{{
                          item.name
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      field="next"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: true,
                          message: '请选择充值类型',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-radio-group class="radio-bcg" :disabled="lis" v-model="mealForm.next">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">本月</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">次月</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="提交上游" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      field="upstream"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: true,
                          message: '请选择是否提交上游',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-radio-group class="radio-bcg" v-model="mealForm.upstream">
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">提交</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">不提交</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="remarks"
                label="充值备注"
                asterisk-position="end"
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="mealForm.remarks" placeholder="请输入充值备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row :gutter="24">
                      <a-col :span="11">
                        <a-button
                          :loading="loadings"
                          class="width100"
                          status="success"
                          type="primary"
                          @click="submitSetMeals"
                          >充值预测</a-button
                        >
                      </a-col>
                      <a-col :span="2" />
                      <a-col :span="11">
                        <a-button
                          :loading="loadings"
                          type="primary"
                          class="width100"
                          @click="submitSetMeal"
                          >确认充值</a-button
                        >
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                v-if="mealCardList.length > 0"
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ mealCardList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / mealCardList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <!-- <a-divider type="dashed" :margin="20">常见问题</a-divider>
            <a-collapse>
              <a-collapse-item header="卡板充值的使用方法" key="1">
                <div
                  >下载充值模板，输入卡板ID，卡板ID在卡板列表第一列，然后输入要充值的卡号，导入充值充值文档，即可完成充值
                </div>
              </a-collapse-item>
            </a-collapse> -->
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="1" title="余额充值">
        <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
          <a-col :span="8" :offset="6">
            <a-form
              class="huakaClass"
              ref="correctRef"
              :model="correctForm"
              :auto-label-width="true"
              @submit="submits"
            >
              <a-form-item label="充值方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.addCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.endCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  { required: checked1 == 'disOrders' ? true : false, message: '卡号不能为空' },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked1" value="disOrders" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="correctForm.cardMultiline"
                      :disabled="checked1 == 'disOrders' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item :content-flex="false" hide-asterisk :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
                  </a-col>
                  <a-col :span="10">
                    <a-button class="width100" @click="exportCards">下载充值模板</a-button>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-upload
                      ref="sslUs"
                      :limit="1"
                      :action="wendangCardPay + '?type=' + correctForm.type"
                      @success="onSsl"
                      @error="onError"
                      :auto-upload="false"
                    >
                      <template #upload-button>
                        <a-button
                          style="width: 100%"
                          :disabled="checked1 != 'disOrder' ? true : false"
                          type="primary"
                          class="width100"
                          >导入充值文件</a-button
                        >
                      </template>
                    </a-upload>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="充值金额" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="balance"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请输入充值金额',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.balance"
                        :disabled="checked1 == 'disOrder' ? true : false"
                        placeholder="请输入充值金额"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="充值类型" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />

                  <a-col :span="22">
                    <a-form-item
                      field="type"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: true,
                          message: '请选择充值类型',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-radio-group class="radio-bcg" v-model="correctForm.type">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">加款</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">扣款</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="2">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">最终金额</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button html-type="submit" :loading="loadings" type="primary" class="width100"
                      >确认充值</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <!-- <a-divider type="dashed" :margin="20">常见问题</a-divider>
            <a-collapse>
              <a-collapse-item header="卡板充值的使用方法" key="1">
                <div
                  >下载充值模板，输入卡板ID，卡板ID在卡板列表第一列，然后输入要充值的卡号，导入充值充值文档，即可完成充值
                </div>
              </a-collapse-item>
            </a-collapse> -->
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      title="操作结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.total }}张</span>，可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span>，不可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></p
      >
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import {
    excelPay,
    youxuCardPay,
    wendangCardPay,
    balanceDisorder,
    getCardId,
    byCard,
    mealLists,
  } from '@/api/url'
  import { post, formpost, get } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { onMounted, onUnmounted, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const checked1: any = ref('orderly')
  const checked2: any = ref('orderly')

  const cardRef: any = ref()
  const correctRef: any = ref()
  const mealRef: any = ref()
  const mealList: any = ref()
  const jiancevisible = ref(false)
  const jianceForm: any = ref({})
  const names: any = ref('')
  const loadings: any = ref(false)
  const sslUs = ref()
  const setTimeOut = ref()
  const mealCardList: any = ref([])
  const zong = ref({
    success: 0,
    error: 0,
  })
  const correctForm: any = ref({
    addCard: '',
    endCard: '',
    type: 0,
    balance: '',
    cardMultiline: '',
  })
  const mealForm: any = ref({
    addCard: '',
    endCard: '',
    cardMultiline: '',
    next: 0,
    setMealId: '',
    upstream: 1,
    remarks: '',
  })
  const tabClick = (e: any) => {
    console.log(e)
    checked1.value = 'orderly'
    loadings.value = false
    checked2.value = 'orderly'
    zong.value = {
      success: 0,
      error: 0,
    }
    clearInterval(setTimeOut.value)
  }
  const count = ref(0)
  const errorList: any = ref([])
  const set: any = ref()
  function mealFn() {
    useCommon.mealListFn().then((res) => {
      mealList.value = res.data
    })
  }
  //获取卡板系列
  function cardMealFn() {
    mealList.value = []
    if (mealForm.value.addCard.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: mealForm.value.addCard,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            get({
              url: mealLists,
              data: () => {
                return {
                  seriesIds: res.data.seriesId,
                }
              },
            }).then((res) => {
              if (res.code == 0) {
                mealList.value = res.data
              }
            })
          }
        })
        .catch(() => {})
    }
  }
  //获取卡板系列
  function cardMealFns() {
    mealList.value = []
    let aap = mealForm.value.cardMultiline.split(/[(\r\n)\r\n]+/)
    if (mealForm.value.cardMultiline.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: aap[0],
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            get({
              url: mealLists,
              data: () => {
                return {
                  seriesIds: res.data.seriesId,
                }
              },
            }).then((res) => {
              if (res.code == 0) {
                mealList.value = res.data
              }
            })
          }
        })
        .catch(() => {})
    }
  }
  const lis = ref(false)
  function changeMeal(val: any) {
    mealList.value.forEach((item: any) => {
      console.log('进来了')
      if (item.id == val) {
        if (item.next) {
          lis.value = false
        } else {
          lis.value = true
        }
        mealForm.value.next = 0
      }
    })
  }
  function requestApi(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    const formData = new FormData()
    formData.append('remarks', set.value.remarks)
    formData.append('upstream', set.value.upstream)
    formData.append('setMealId', set.value.setMealId)
    formData.append('next', set.value.next)
    formData.append('cardId', set.value.cardId)
    fetch(item, {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + (res.status == true ? res.data.outTradeNo : res.msg))
        count.value++ // 增加计数器
        set.value.cardId = mealCardList.value[count.value].id
        if (count.value < mealCardList.value.length) {
          requestApi(`/app/order/pay`, mealCardList.value[count.value].card)
        }
      })
      .catch((error) => console.log('Error:', error))
  }
  // 充值套餐
  const submitSetMeal = () => {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        mealCardList.value = []
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        count.value = 0
        set.value = JSON.parse(JSON.stringify(mealForm.value))
        if (checked2.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: mealForm.value.addCard,
                endCard: mealForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                mealCardList.value = res.data
                set.value.cardId = mealCardList.value[count.value].id
                requestApi(`/app/order/pay`, mealCardList.value[count.value].card)
              }
            })
            .catch(() => {})
        } else if (checked2.value == 'disOrders') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: mealForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                mealCardList.value = res.data
                set.value.cardId = mealCardList.value[count.value].id
                // 请求接口
                requestApi(`/app/order/pay`, mealCardList.value[count.value].card)
              }
            })
            .catch(() => {})
        }
      }
    })
  }
  // 充值预测
  const submitSetMeals = () => {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        mealCardList.value = []
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        count.value = 0
        set.value = JSON.parse(JSON.stringify(mealForm.value))
        if (checked2.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: mealForm.value.addCard,
                endCard: mealForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                mealCardList.value = res.data
              }
            })
            .catch(() => {})
        } else if (checked2.value == 'disOrders') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: mealForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                mealCardList.value = res.data
              }
            })
            .catch(() => {})
        }
      }
    })
  }
  //充值余额
  const submits = () => {
    correctRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'disOrder') {
          sslUs.value.submit()
        } else if (checked1.value == 'orderly') {
          post({
            url:
              youxuCardPay +
              '?type=' +
              correctForm.value.type +
              '&balance=' +
              correctForm.value.balance,
            data: () => {
              return {
                addCard: correctForm.value.addCard,
                endCard: correctForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                names.value = '充值'
                jianceForm.value = res.data
                jiancevisible.value = true

                loadings.value = false
                correctRef.value?.resetFields()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else if (checked1.value == 'disOrders') {
          formpost({
            url: balanceDisorder,
            data: () => {
              return {
                type: correctForm.value.type,
                balance: correctForm.value.balance,
                cardMultiline: correctForm.value.cardMultiline,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                names.value = '充值'
                jianceForm.value = res.data
                jiancevisible.value = true

                loadings.value = false
                correctRef.value?.resetFields()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  const exportCards = () => {
    // window.location.href = excelPay
    window.location.assign(excelPay)
  }

  //上传
  const onSsl = (fileItem: any) => {
    jianceForm.value = fileItem.response.data
    jiancevisible.value = true
    checked1.value = 'orderly'
    loadings.value = false
    cardRef.value?.resetFields()
    correctRef.value?.resetFields()
  }

  //上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
    loadings.value = false
  }

  import { onBeforeRouteLeave } from 'vue-router'

  onBeforeRouteLeave((to, from, next) => {
    //清除定时器
    clearInterval(setTimeOut.value) // 组件销毁时清除定时器
    next()
  })

  onMounted(async () => {
    await mealFn()
  })
</script>

<style scoped>
  .step1 {
    .top {
      width: 100%;
      border-radius: 0;
      font-size: 13px;
      text-align: center;
      padding: 8px;
      border: 1px solid #f2f3f5;
      margin-bottom: 20px;
    }
    .alert-text {
      border-radius: 4px;
      text-align: center;
    }
  }
  .color {
    background-color: var(--color-bg-1);
    border-radius: 10px;
    padding: 20px;
  }

  :deep(.arco-upload) {
    width: 100%;
  }

  .arco-radio-group :deep(.arco-radio) {
    margin-right: 0px;
  }
  .huakaClass {
    padding: 30px 0px;
  }
  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }
  .huakaClass :deep(.arco-upload-progress) {
    display: none !important;
  }
</style>
